<template>
  <div class="claim-container">
    <!-- 头部区域 -->
    <div class="header-container">
      <div class="emergency-header">
        <div class="black-block"></div>
        <div class="red-title">
          <el-icon><User /></el-icon>
          人员认领
        </div>
      </div>
      <div class="search-box">
        <el-input
          v-model="searchQuery"
          placeholder="搜索特征/发现地点..."
          clearable
          @keyup.enter="handleSearch"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 信息列表 -->
    <div class="claim-list">
      <div v-if="loading" class="loading-container">
        <el-icon class="loading-icon"><Loading /></el-icon>
        正在加载待认领人员...
      </div>

      <template v-else>
        <div
          v-for="person in filteredPersons"
          :key="person.id"
          class="claim-card"
          @click="showDetail(person)"
        >
          <div class="person-main">
            <div class="person-header">
              <div class="person-title">
                <span class="name">{{ person.name || "未知人员" }}</span>
                <span class="age">（约{{ person.age }}岁）</span>
              </div>
              <div class="person-status-tags">
                <el-tag
                  :type="statusTypeMap[person.status]"
                  class="status-tag"
                >
                  {{ person.status }}
                </el-tag>
                <div class="person-tags">
                  <el-tag
                    v-for="tag in person.tags"
                    :key="tag"
                    class="person-tag"
                    :type="tagTypeMap[tag] || 'info'"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
            </div>

            <!-- 新增照片显示区域 -->
            <div class="person-photo">
              <el-image
                :src="person.photo || 'https://via.placeholder.com/50'"
                fit="cover"
              >
                <template #error>
                  <div class="image-error">
                    <el-icon><Picture /></el-icon>
                    <div>暂无照片</div>
                  </div>
                </template>
              </el-image>
            </div>

            <div class="person-info">
              <div class="info-row full-width">
                <div class="info-item">
                  <el-icon><Calendar /></el-icon>
                  <span class="label">发现时间：</span>
                  {{ person.foundDate }}
                </div>
              </div>
              <div class="info-row full-width">
                <div class="info-item">
                  <el-icon><Location /></el-icon>
                  <span class="label">发现地点：</span>
                  {{ person.foundLocation }}
                </div>
              </div>
              <div class="info-row">
                <div class="info-item">
                  <el-icon><UserFilled /></el-icon>
                  <span class="label">性别：</span>
                  {{ person.gender || "未知" }}
                </div>
                <div class="info-item">
                  <el-icon><School /></el-icon>
                  <span class="label">体貌特征：</span>
                  {{ person.build || "暂无" }}
                </div>
              </div>
            </div>

            <div class="person-features">
              <el-icon><Comment /></el-icon>
              <span class="feature-text">{{ person.features }}</span>
            </div>
          </div>
        </div>

        <div v-if="!filteredPersons.length" class="empty-state">
          <div class="empty-content">
            <el-icon class="empty-icon"><Box /></el-icon>
            <p class="empty-text">当前没有待认领人员信息</p>
            <p class="empty-subtext">发现走失人员请立即联系当地公安机关</p>
          </div>
        </div>
      </template>
    </div>

    <!-- 详情弹窗 -->
    <el-dialog
      v-model="detailVisible"
      class="claim-dialog"
      width="800px"
      :close-on-click-modal="false"
    >
      <div class="dialog-header">
        <div class="dialog-title">
          <span class="name">{{ currentPerson.name || "未知人员" }}</span>
          <span class="age">（约{{ currentPerson.age }}岁）</span>
          <el-tag
            :type="statusTypeMap[currentPerson.status]"
            class="status-tag"
          >
            {{ currentPerson.status }}
          </el-tag>
        </div>
        <div class="dialog-subtitle">
          <div class="info-item">
            <el-icon><Calendar /></el-icon>
            <span>发现时间：{{ currentPerson.foundDate }}</span>
          </div>
          <div class="info-item">
            <el-icon><Location /></el-icon>
            <span>登记机构：{{ currentPerson.registerOrg }}</span>
          </div>
        </div>
      </div>

      <el-row :gutter="20" class="dialog-body">
        <el-col :span="8">
          <div class="detail-photo">
            <el-image
              :src="currentPerson.photo"
              fit="cover"
              class="person-image"
            >
              <template #error>
                <div class="image-error">
                  <el-icon><Picture /></el-icon>
                  <div>暂无照片</div>
                </div>
              </template>
            </el-image>
            <div class="contact-box">
              <h3 class="contact-title">
                <el-icon><Connection /></el-icon>
                认领联系方式
              </h3>
              <div class="contact-info">
                <div class="contact-item">
                  <el-icon><OfficeBuilding /></el-icon>
                  <span class="label">救助机构：</span>
                  {{ currentPerson.rescueOrg }}
                </div>
                <div class="contact-item">
                  <el-icon><Phone /></el-icon>
                  <span class="label">联系电话：</span>
                  <el-button
                    type="primary"
                    link
                    @click="copyContact(currentPerson.contact)"
                  >
                    {{ contactButtonText }}
                  </el-button>
                </div>
                <div class="contact-item">
                  <el-icon><Location /></el-icon>
                  <span class="label">机构地址：</span>
                  {{ currentPerson.orgAddress }}
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="16">
          <div class="detail-section">
            <h3 class="section-title">
              <el-icon><List /></el-icon>
              详细特征
            </h3>
            <div class="detail-grid">
              <div class="detail-item">
                <span class="item-label">性别：</span>
                <span class="item-value">{{ currentPerson.gender || "未知" }}</span>
              </div>
              <div class="detail-item">
                <span class="item-label">身高：</span>
                <span class="item-value">{{ currentPerson.height || "未知" }} cm</span>
              </div>
              <div class="detail-item">
                <span class="item-label">体型：</span>
                <span class="item-value">{{ currentPerson.build || "未知" }}</span>
              </div>
              <div class="detail-item">
                <span class="item-label">衣着：</span>
                <span class="item-value">{{ currentPerson.clothing || "无记录" }}</span>
              </div>
              <div class="detail-item full-width">
                <span class="item-label" style="width: 90px;">显著特征：</span>
                <span class="item-value">{{ currentPerson.features }}</span>
              </div>
            </div>
          </div>

          <div class="detail-section">
            <h3 class="section-title">
              <el-icon><Document /></el-icon>
              相关记录
            </h3>
            <div class="record-list">
              <div
                v-for="(record, index) in currentPerson.records"
                :key="index"
                class="record-item"
              >
                <div class="record-header">
                  <span class="record-type">{{ record.type }}</span>
                  <span class="record-date">{{ record.date }}</span>
                </div>
                <div class="record-content">
                  {{ record.content }}
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 认领流程 -->
      <div class="claim-process">
        <h3 class="process-title">
          <el-icon><Guide /></el-icon>
          认领流程说明
        </h3>
        <el-steps :active="currentProcessStep" align-center>
          <el-step title="身份核实" description="提供有效身份证件" />
          <el-step title="特征比对" description="核对体貌特征信息" />
          <el-step title="生物识别" description="DNA或指纹比对" />
          <el-step title="完成认领" description="签署认领文件" />
        </el-steps>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import {
  User, Search, Loading,
  Picture, Calendar, Location, Phone,
  List, Comment, Connection, Guide,
  Document, OfficeBuilding, UserFilled,
  School, Box
} from '@element-plus/icons-vue'

interface PersonInfo {
  id: number
  name?: string
  age: number
  gender?: string
  photo: string
  foundDate: string
  foundLocation: string
  registerDate: string
  registerOrg: string
  features: string
  status: '待认领' | '核实中' | '已认领' | '已安置'
  tags: string[]
  starred: boolean
  contact: string
  rescueOrg: string
  orgAddress: string
  records: {
    type: string
    date: string
    content: string
  }[]
  height?: number
  build?: string
  clothing?: string
}

// 响应式数据
const searchQuery = ref('')
const loading = ref(true)
const detailVisible = ref(false)
const currentPerson = ref<PersonInfo>({} as PersonInfo)
const contactButtonText = ref('点击查看')
const persons = ref<PersonInfo[]>([])

// 类型映射
const tagTypeMap: Record<string, 'danger' | 'success' | 'warning'> = {
  '紧急': 'danger',
  '儿童': 'warning',
  '老人': 'warning',
  '特殊需求': 'warning',
  '外伤': 'danger'
}

const statusTypeMap = {
  '待认领': 'warning',
  '核实中': 'info',
  '已认领': 'success',
  '已安置': 'success'
}

// 模拟数据
const fetchPersons = () => {
  setTimeout(() => {
    persons.value = [
      {
        id: 1,
        name: '王美美',
        age: 6,
        gender: "女",
        photo: "https://picsum.photos/100/100?random=1",
        foundDate: "2023-08-15 17:30",
        foundLocation: "上海市浦东新区陆家嘴环形天桥",
        registerDate: "2023-08-15 18:00",
        registerOrg: "浦东新区救助管理站",
        features: "身穿粉色公主裙，左手腕系蓝色丝带，会说简单英语单词，右耳后有红色胎记",
        status: "待认领",
        tags: ["儿童", "紧急"],
        starred: false,
        contact: "021-5588****",
        rescueOrg: "上海市儿童福利院",
        orgAddress: "浦东新区张江路123号",
        records: [
          {
            type: "发现记录",
            date: "2023-08-15",
            content: "由市民王先生在天桥发现，当时正在哭泣寻找家人"
          },
          {
            type: "体检记录",
            date: "2023-08-16",
            content: "身高115cm，体重20kg，轻微擦伤已处理"
          }
        ],
        height: 115,
        build: "偏瘦",
        clothing: "粉色连衣裙+白色凉鞋"
      },
      {
        id: 2,
        name: "李建国",
        age: 78,
        gender: "男",
        photo: "https://picsum.photos/100/100?random=2",
        foundDate: "2023-08-10 09:15",
        foundLocation: "北京市海淀区中关村地铁站A口",
        registerDate: "2023-08-10 10:00",
        registerOrg: "海淀区救助服务中心",
        features: "手持拐杖，佩戴银色老花镜，穿藏青色中山装，随身携带写有'李建国'字样的纸条",
        status: "核实中",
        tags: ["老人", "阿尔茨海默"],
        starred: true,
        contact: "010-6262****",
        rescueOrg: "北京市老年救助中心",
        orgAddress: "海淀区双清路85号",
        records: [
          {
            type: "发现记录",
            date: "2023-08-10",
            content: "地铁工作人员发现其在站内徘徊超过3小时"
          },
          {
            type: "医疗记录",
            date: "2023-08-11",
            content: "血压偏高（150/95mmHg），意识时而清醒时而模糊"
          }
        ],
        height: 168,
        clothing: "藏青色中山装"
      },
      {
        id: 3,
        name: "张小华",
        age: 10,
        gender: "男",
        photo: "https://picsum.photos/100/100?random=3",
        foundDate: "2023-09-01 14:00",
        foundLocation: "北京市朝阳区某公园",
        registerDate: "2023-09-01 15:00",
        registerOrg: "朝阳区救助服务中心",
        features: "身穿蓝色T恤，黑色短裤，手里拿着玩具",
        status: "待认领",
        tags: ["儿童"],
        starred: false,
        contact: "010-1234****",
        rescueOrg: "北京市儿童福利院",
        orgAddress: "朝阳区某路123号",
        records: [],
        height: 140,
        build: "正常",
        clothing: "蓝色T恤+黑色短裤"
      },
      {
        id: 4,
        name: "李四",
        age: 65,
        gender: "男",
        photo: "https://picsum.photos/100/100?random=4",
        foundDate: "2023-09-02 09:30",
        foundLocation: "上海市某街道",
        registerDate: "2023-09-02 10:00",
        registerOrg: "上海市救助服务中心",
        features: "身穿灰色外套，手持拐杖，神情恍惚",
        status: "核实中",
        tags: ["老人"],
        starred: true,
        contact: "021-5678****",
        rescueOrg: "上海市老年救助中心",
        orgAddress: "上海市某路456号",
        records: [],
        height: 170,
        build: "偏瘦",
        clothing: "灰色外套"
      }
    ]
    loading.value = false
  }, 2000)
}

// 计算属性
const filteredPersons = computed(() => {
  const query = searchQuery.value.toLowerCase()
  return persons.value.filter(p =>
    (p.name?.toLowerCase().includes(query) ||
      p.features.toLowerCase().includes(query) ||
      p.tags.some(tag => tag.toLowerCase().includes(query)) ||
      p.foundLocation.toLowerCase().includes(query))
  )
})

const currentProcessStep = computed(() => {
  const statusMap = {
    '待认领': 0,
    '核实中': 1,
    '已认领': 3,
    '已安置': 3
  }
  return statusMap[currentPerson.value.status] || 0
})

// 方法
const showDetail = (person: PersonInfo) => {
  currentPerson.value = person
  contactButtonText.value = '点击查看'
  detailVisible.value = true
}

const handleSearch = () => {
  console.log('执行搜索:', searchQuery.value)
}

const copyContact = async (text: string) => {
  try {
    await navigator.clipboard.writeText(text)
    contactButtonText.value = '已复制'
    setTimeout(() => {
      contactButtonText.value = '点击查看'
    }, 2000)
    ElMessage.success({
      message: '联系方式已复制到剪贴板',
      duration: 1500
    })
  } catch (err) {
    ElMessage.error('复制失败，请手动记录')
  }
}

onMounted(() => {
  fetchPersons()
})
</script>

<style scoped>
.claim-container {
  padding: 20px;
  border-radius: 8px;
  height: 100%;
  width: 100%;
  scrollbar-width: thin;
  scrollbar-color: rgba(155, 42, 42, 0.8) transparent;
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  gap: 20px;
}

.emergency-header {
  display: flex;
  height: 45px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}

.black-block {
  width: 10px;
  background: var(--reverse-background-color);
}

.red-title {
  flex: 1;
  background: #f45c5c;
  color: white;
  display: flex;
  align-items: center;
  padding: 0 20px;
  font-size: 22px;
  font-weight: 600;
  gap: 10px;
}

.search-box {
  flex: 1;
  max-width: 480px;
}

.claim-list {
  overflow: auto;
  position: relative;
  height: calc(100% - 50px);
}

.claim-card {
  display: flex;
  justify-content: space-between;
  padding: 16px;
  margin-bottom: 12px;
  border-radius: 6px;
  border: 1px solid;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    transform: translateY(2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  }
}

.person-main {
  flex: 1;
  min-width: 0;
  position: relative;
}

.person-header {
  margin-bottom: 12px;
}

.person-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.name {
  font-size: 18px;
  font-weight: 500;
}


.status-tag {
  margin-left: 8px;
  height: 30px;
  font-size: 15px;
}

.person-status-tags {
  display: flex;
  align-items: center;
  gap: 8px;
}

.person-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.person-tag {
  height: 24px;
  font-size: 12px;
}

.person-info {
  margin: 12px 0;
}

.info-row {
  display: flex;
  gap: 24px;
  margin-bottom: 8px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.person-features {
  display: flex;
  gap: 8px;
  color: #303133;
  font-size: 14px;
  line-height: 1.6;
  padding: 12px;
  background: #fff1f0;
  border-radius: 6px;
}

.empty-state {
  display: flex;
  justify-content: center;
  padding: 60px 0;
}

.empty-content {
  text-align: center;
  max-width: 400px;
}

.empty-icon {
  font-size: 72px;
  margin-bottom: 16px;
}

.empty-text {
  font-size: 16px;
  margin-bottom: 8px;
}

.empty-subtext {
  font-size: 14px;
}

/* 详情弹窗样式 */
.claim-dialog {
  --dialog-radius: 12px;
}

.dialog-header {
  padding-bottom: 16px;
  border-bottom: 1px solid;
}

.dialog-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  margin-bottom: 12px;
}

.dialog-subtitle {
  display: flex;
  gap: 24px;
  font-size: 14px;
}

.dialog-body {
  padding: 5px 0;
}

.detail-photo {
  position: relative;
}

.person-image {
  width: 100%;
  height: 280px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.contact-box {
  padding: 16px;
  border-radius: 8px;
}

.contact-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin-bottom: 12px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 8px;
}


.detail-section {
  margin-bottom: 24px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin-bottom: 16px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  font-size: 14px;
}

.detail-item {
  display: flex;
  gap: 2px;
  padding: 8px;
  border: 1px solid;
  border-radius: 6px;
}

.full-width {
  grid-column: 1 / -1;
}

.record-list {
  border: 1px solid;
  border-radius: 8px;
  overflow: hidden;
}

.record-item {
  padding: 12px;
  border-bottom: 1px solid;
}

.record-item:last-child {
  border-bottom: none;
}

.record-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
}

.record-content {
  font-size: 14px;
  line-height: 1.6;
}

.claim-process {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid;
}

.process-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  margin-bottom: 20px;
}

/* 加载动画 */
@keyframes rotating {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 400px;
}

.loading-icon {
  font-size: 40px;
  margin-bottom: 16px;
  animation: rotating 2s linear infinite;
}


.person-photo {
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 0;
  border: 1px solid;
}

.image-error {
  width: 100%;
  height: 100%;
  min-height: 100px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>
